<template>
	<view class="show">
		<view class="goodsDetail">
			<u-image width="100%" height="750rpx" :src="goodsDetail.cover_url"></u-image>
			<view class="title u-p-30 u-font-xl">
				{{goodsDetail.title ? goodsDetail.title : '标题'}}
			</view>
			<view class="u-flex u-row-between u-p-l-30 u-p-r-30 u-font-lg">
				<view class="price u-font-xl">
					￥{{goodsDetail.price ? goodsDetail.price : 0}}
				</view>
				<view class="salse">
					销量 <text>{{goodsDetail.sales ? goodsDetail.sales : 0}}</text>
				</view>
			</view>
		</view>
		<view class="goodstab">
			<u-tabs :list="list" :is-scroll="false" bar-width="60" :current="current" @change="change"></u-tabs>
			<!-- 详情 -->
			<block v-if="current === 0">
				<u-parse :html="goodsDetail.details" :selectable="true"></u-parse>
			</block>
	
			<!-- 评论 -->
			<block v-if="current === 1">
				<view class="comment u-p-30 u-flex" v-for="item in commonList" :key="item.order_id">
					<view class="avtor u-m-r-20">
						<u-avatar :src="item.user.avatar_url"></u-avatar>
					</view>
					<view class="info">
						<view class="title">
							{{item.user.name}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="date">
							{{item.created_at}}
						</view>
					</view>
				</view>
			</block>
	
			<!-- 推荐 -->
			<block v-if="current === 2">
				<u-row gutter="16" class="u-skeleton">
					<u-col span="6" v-for="item in goodsList">
						<goods-cards :item="item"></goods-cards>
					</u-col>
				</u-row>
			</block>
		</view>
	
	
	
		<!-- 底部购物车功能 -->
		<view class="navigation u-row-between u-p-r-30">
			<view class="left">
				<view class="item u-text-center" @tap="collect"
					:style="{color: 'red'}">
					<u-icon name="star" :size="40"></u-icon>
					<view class="text u-line-1">收藏</view>
				</view>
	
				<view class="item car" @tap="onCart">
					<u-badge class="car-num" tyoe="warning" :count="cartNum" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @tap="addCart">加入购物车</view>
				<view class="buy btn u-line-1" @tap="toViewCart">立即购买</view>
			</view>
		</view>
	
	
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				commonList: [],
				goodsDetail: {},
				goodsList: [{},{},{},{}],
				current: 0,
				list: [{
					name: '商品详情'
				}, {
					name: '商品评论',
					count: 0
				}, {
					name: '商品推荐',
				}],
				is_collect: 0,
				count: 111,
				cartNum: 0
			}
		},
		onLoad(option) {
			const optionLen = Object.keys(option).length;
			if (optionLen === 0) return
			this.goodsId = option.id;
			this.getGoodsDetail();
			this.cartList();
			console.log(this.$u.color)
			// console.log(option);
		},
		methods: {
			async getGoodsDetail() {
				const res = await this.$u.api.goodsDetail(this.goodsId);
				this.commonList = res.goods.comments;
				this.goodsDetail = res.goods
				this.goodsList = res.like_goods
				this.list[1].count = this.commonList.length;
				this.is_collect = this.goodsDetail.is_collect;
				// console.log('商品详情', this.is_collect)
			},
			change(index) {
				this.current = index;
			},

			/**
			 * 收藏 
			 */
			async collect() {
				if (!this.vuex_token) {
					this.$u.utils.toLogin();
				}
				await this.$u.api.goodsCollect(this.goodsId)
				if (this.is_collect) {
					this.is_collect = 0
				} else {
					this.is_collect = 1
				}
				this.is_collect === 0 ? this.$u.toast('取消收藏') : this.$u.toast('收藏成功');
				// console.log(this.is_collect);
			},
			/**
			 * 获取购物车列表
			 */
			async cartList() {
				const {
					data
				} = await this.$u.api.cartList()
				this.cartNum = data.length;
				// console.log(data);
			},

			/**
			 * 购物车跳转
			 */
			onCart() {
				console.log("oncart", this.vuex_token)
				if (!this.vuex_token) return
				this.$u.route({
					url: 'pages/cart/cart',
					type: 'tab'
				})
			},

			/**
			 * 添加到购物车
			 */
			async addCart() {
				await this.$u.api.addCart({
					goods_id: this.goodsId,
				})
				this.cartList();
				// console.log('addcart')
			},
			toViewCart() {
				this.$u.route('pages/cart/view-cart')
			}

		},
	}
</script>

<style lang="scss" scoped>
	.show {
		padding-bottom: 80rpx
	}

	.goodsDetail {
		.title {
			font-weight: bold;
		}

		.price {
			color: red;
		}

		.salse {
			text {
				padding-left: 10rpx;
				color: red;
				font-weight: bold;
			}
		}
	}


	.navigation {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}

	.goodsDetail {
		&>div {
			height: 750rpx;
		}
	}
</style>
